<template>
    <div class="login">
        <div class="form">
            <h2 class="title">员工管理系统</h2>
            <el-form class="search-form" :model="data" ref="formRef" :rules="rules" label-position="top">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="data.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="data.password" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item prop="role">
                    <el-radio-group v-model="data.role">
                        <el-radio value="2" size="small">用户</el-radio>
                        <el-radio value="1" size="small">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-button class="login-btn" type="primary" size="large" @click="loginBtn">登录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { login } from "@/api/login";
import { useRouter } from "vue-router";
import { useUserStore } from '@/store/user';

const router = useRouter();
const userStore = useUserStore()

// 表格ref
const formRef = ref(null);
// 表单验证
const rules = reactive({
    username: {
        required: true,
        message: "账号不能为空",
        trigger: "change",
    },
    password: {
        required: true,
        message: "密码不能为空",
        trigger: "change",
    },
    role: {
        required: true,
        message: "请选择角色",
        trigger: "change",
    },
});

// 表单数据
const data = reactive({
    username: "",
    password: "",
    role: '2',
});

// 登录请求
const loginBtn = async () => {
    formRef.value.validate(async (valid) => {
        if (!valid) return;
        try {
            const res = await login(data);
            if (res.code === 0) {
                const { userInfo, token } = res.data;
                sessionStorage.setItem('token', JSON.stringify(token));
                sessionStorage.setItem('role', JSON.stringify(data.role));
                sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
                userStore.setInfo(userInfo || '');
                userStore.setAvatar(userInfo.avator || '');

                router.push("/");
                ElMessage.success(
                    `欢迎${data.role == 1 ? "管理员" : "用户"}${userInfo.username ? userInfo.username : userInfo.staff_name}`
                );
            } else {
                ElMessage.error(res.msg);
            }
        } catch {
            console.log("chucuo");
        }
    });
};
</script>

<style lang="scss" scoped>
.login {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(http://codegen.caihongy.cn/20220121/30440b5bbe664f33b117e8db0577a9a2.png);
    background-position: center;
    background-size: 100% 100%;
}

.form {
    position: absolute;
    width: 400px;
    height: 450px;
    left: 50%;
    top: 50%;
    transform: translate(20%, -50%);
    // border: 1px solid #fff;
    box-sizing: border-box;
    padding: 10px 40px;

    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
}

.login-btn {
    width: 100%;
    margin-top: 15px;
}
</style>